<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 挂载点、模板、实例之间的关系 -->
    <!-- 挂载点 -->
    <div id="root">
        <!-- 模板 -->
        <div @click="handleClient">{{content}}</div>
        <!--  v-on: 等价于 @  -->
        <!-- 模板 -->
    </div>
    <!-- 挂载点 -->

    <script>
        <!-- 实例 -->
        new Vue({
            el : "#root",
            data : {
                content : "Hello World ..."
                // template："<h1>hello</h1>",  模板也可以写在这里s
            },
            methods : {
                handleClient : function(){
                    this.content = "Hello VUE ..."
                }
            }
        });
    </script>
</body>
</html>